<template>
	<view class="bg-white">
		<cu-custom bgColor="bg-white">
			<block slot="content">Pisces-Mini-Program</block>
		</cu-custom>


		<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
		 duration="500" v-if="swiperList!='NULL'">
			<swiper-item v-for="(item,index) in swiperList" :key="index" @click="goDetails" :data-cid="item.cid" v-if="index<3">
				<image :src="item.thumb[0].str_value" mode="aspectFill"></image>
				<!-- <video :src="item.cid" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
			</swiper-item>
		</swiper>

		<view class="cu-list grid solids-bottom" :class="['col-' + gridCol,gridBorder?'':'no-border']">
			<view class="cu-item" v-for="(item,index) in categories" :key="index" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]"
			 @click="goCategorieslist" :data-mid="item.mid">
				<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
					<view class="cu-tag badge" v-if="item.count!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<!--以下是推荐阅读-->
		<view class="cu-bar">
			<view class="action">
				<text class="cuIcon-titles text-brown"></text>
				<text class="text-xl text-bold">推荐阅读</text>
			</view>
			<view class="padding-sm margin-xs justify-end"><text class="cuIcon-evaluate_fill text-brown"></text></view>
		</view>
		<view class="week-container margin-top">
			<scroll-view class="swiper-wrapper" :scroll-x="true" :scroll-with-animation="true">
				<view class="new-article shadow-mini" v-for="(item,index) in recommendList" :key="index" @click="goDetails" :data-cid="item.cid">
					<view class="radius">
						<image :src="item.thumb[0].str_value" class="article-img" mode="scaleToFill"></image>
						<view class="article-title bg-white"><text class="text-sm text-black">{{item.title}}</text></view>
					</view>

				</view>
			</scroll-view>
		</view>


		<!--以下是最新动态-->
		<view class="cu-bar">
			<view class="action">
				<text class="cuIcon-titles text-green"></text>
				<text class="text-xl text-bold">最新动态</text>
			</view>
			<view class="padding-sm margin-xs justify-end"><text class="cuIcon-creativefill text-green"></text></view>
		</view>

		<view v-for="(item , index) in articleList" :key="index" @click="goDetails" :data-cid="item.cid" class="bg-white">
			<view class="cu-card case" v-if="item.style[0].str_value ==1">
				<view class="cu-item  shadow">
					<view class="image">
						<image :src="item.thumb[0].str_value" mode="widthFix"></image>
						<view class="cu-tag bg-blue">{{item.categories[0].name}}</view>
						<view class="cu-bar bg-gradual-blue"> <text class="text-cut">{{item.title}}</text></view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar">
								<image src="../../static/logo.jpg" class="cu-avatar lg justify-start"></image>
							</view>
							<view class="content flex-sub">
								<view class="text-grey">{{item.author}}</view>
								<view class="text-gray text-sm flex justify-between">
									<view>{{formatDate(item.created)}}</view>
									<view class="text-gray text-sm">
										<text class="cuIcon-attentionfill margin-lr-xs"></text> {{item.views[0].views}}
										<text class="cuIcon-appreciatefill margin-lr-xs"></text> {{item.likes[0].likes}}
										<text class="cuIcon-messagefill margin-lr-xs"></text> {{item.commentsNum}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="cu-card" v-if="item.style[0].str_value ==2">
				<!-- <view class="title">
						<view class="text-cut">无意者 烈火焚身;以正义的烈火拔出黑暗。我有自己的正义，见证至高的烈火吧。</view>
					</view> -->
				<view class="cu-item shadow" style="height: 250upx;">
					<view class="thumb margin-right" style="height: 250upx; background-size:cover;" :style="[{backgroundImage:'url('+item.thumb[0].str_value+')'}]">
						<!-- <image :src="item.thumb[0].str_value" mode="scaleToFill"></image> -->
					</view>
					<view class="text-cut padding-top text-xl text-bold">{{item.title}}</view>
					<view class="text-content padding-top-xs moretext-cut padding-right-xs">{{item.description[0].str_value}}</view>
					<view class="text-gray text-sm padding-top-sm flex justify-end padding-right-sm">
						<text class="cuIcon-attention margin-lr-xs "></text> {{item.views[0].views}}
						<text class="cuIcon-appreciate margin-lr-xs "></text> {{item.likes[0].likes}}
						<text class="cuIcon-message margin-lr-xs "></text> {{item.commentsNum}}

					</view>
				</view>
			</view>


			<view class="cu-card " v-if="item.style[0].str_value ==3">
				<view class=" cu-item align-center shadow" style="height: 350upx; background-size:cover;" :style="[{backgroundImage:'url('+item.thumb[0].str_value+')'}]">
					<view style="background:rgba(0,0,0,0.4); height: 100%;">
						<view class="cu-tag bg-gradual-green">{{item.categories[0].name}}</view>
						<view class="padding">
							<view class="padding-xs text-xl text-bold text-cut text-white">{{item.title}}</view>
							<view class="text-lg text-white padding-lr-xs moretext-cut">{{item.description[0].str_value}}</view>
							<view class="padding-xs margin-top-sm flex align-end">
								<view class="cu-tag bg-red light df round"><text class="cuIcon-attention margin-lr-xs"></text>
									{{item.views[0].views}}</view>
								<view class="cu-tag bg-green light df round"><text class="cuIcon-appreciate margin-lr-xs"></text>
									{{item.likes[0].likes}}</view>
								<view class="cu-tag bg-brown light df round"> <text class="cuIcon-message margin-lr-xs"></text>
									{{item.commentsNum}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	var page = 2;
	var API = require('../../utils/api');
	var Net = require('../../utils/net');
	export default {
		data() {
			return {
				articleList: [],
				cardCur: 0,
				swiperList: [],
				recommendList: [],
				gridCol: 4,
				gridBorder: false,
				dotStyle: true,
				towerStart: 0,
				time: '',
				direction: '',
				fields: [],
				categories: [{
					cuIcon: 'hotfill',
					color: 'red',
					badge: 120,
					mid: '5',
					name: '网站源码'
				}, {
					cuIcon: 'apps',
					color: 'orange',
					badge: 1,
					mid: '6',
					name: '实用软件'
				}, {
					cuIcon: 'colorlens',
					color: 'yellow',
					badge: 0,
					mid: '7',
					name: '模板源码'
				}, {
					cuIcon: 'noticefill',
					color: 'olive',
					badge: 22,
					mid: '8',
					name: '热门活动'
				}],
			};
		},
		onLoad() {
			// this.getCat();  本来是获取分类列表的，但是不多就直接写死吧，不用掉用了。
			this.getSwiper();
			this.getArticleList();
			this.getRecommend();
		},
		onShow() {},
		onPullDownRefresh: function() {
			this.refresh();
		},
		onReachBottom() {
			this.getNewArticleList();
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {}
			return {
				title: "Pisces-Mini-Program",
				path: '/pages/index/index'
			}
		},
		methods: {
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			formatDate(datetime) {
				var datetime = new Date(parseInt(datetime * 1000));
				// 获取年月日时分秒值  slice(-2)过滤掉大于10日期前面的0
				var year = datetime.getFullYear(),
					month = ("0" + (datetime.getMonth() + 1)).slice(-2),
					date = ("0" + datetime.getDate()).slice(-2),
					hour = ("0" + datetime.getHours()).slice(-2),
					minute = ("0" + datetime.getMinutes()).slice(-2);
				//second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + date;
				// 返回
				return result;
			},
			refresh: function() {
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			getArticleList: function() {
				var that = this;
				Net.request({
					url: API.GetPosts(),
					success: function(res) {
						console.log(res.data.data)
						that.articleList = res.data.data;
					}
				})
			},
			getNewArticleList: function() {
				uni.request({
					url: API.GetPosts(),
					data: {
						page: page
					},
					success: (res) => {
						if (res.data.status == "403") {
							//没有数据
							return;
						}
						page++; //每触底一次 page +1
						// console.log(page);
						this.articleList = this.articleList.concat(res.data.data); //将数据拼接在一起	
					}
				});
			},
			// getCat: function() {
			// 	var that = this;
			// 	Net.request({
			// 		url: API.GetCat(),
			// 		success: function(res) {
			// 			that.categories = res.data.data
			// 		}
			// 	})
			// },
			getSwiper: function() {
				var that = this;
				Net.request({
					url: API.GetSwiperPost(),
					success: function(res) {
						that.swiperList = res.data.data
						// console.log(that.swiperList)
					}
				})
			},
			getRecommend: function() {
				var that = this;
				Net.request({
					url: API.GetRecommend(),
					success: function(res) {
						// console.log(res.data.data)
						that.recommendList = res.data.data
						// console.log(that.swiperList)
					}
				})
			},
			goDetails: function(e) {
				uni.navigateTo({
					url: "/pages/details/details?cid=" + e.currentTarget.dataset.cid
				})
			},
			goCategorieslist: function(e) {
				uni.navigateTo({
					url: "/pages/categorieslist/categorieslist?mid=" + e.currentTarget.dataset.mid
				})
			},
		}
	}
</script>

<style>
	.shadow {
		box-shadow: 2upx 4upx 15upx #c2c2c2;
	}

	.shadow-mini {
		box-shadow: 2upx 4upx 10upx #c2c2c2;
	}

	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}

	.week-container {
		white-space: nowrap;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
		z-index: 1;
		padding: 20upx 25upx;
		border-radius: 15upx;
		
	}

	.week-container .swiper-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 1;
		display: flex;
		margin: 0 auto;
		border-radius: 15upx;
	}

	.week-container .swiper-wrapper .new-article {
		display: inline-block;
		background: #ffffff;
		border-radius: 12upx;
		flex-shrink: 0;
		width: 50%;
		height: 100%;
		position: relative;
		transition-property: transform;
		transform: translate3d(0, 0, 0);
		margin-right: 20upx;
	}

	.week-container .swiper-wrapper .new-article .article-img {
		width: 100%;
		max-height: 220upx;
		display: block;
		border-top-left-radius: 12upx;
		border-top-right-radius: 12upx;
	}

	.week-container .swiper-wrapper .new-article .article-title {
		display: block;
		padding: 16upx 0 16upx 16upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;

	}


	.week-container .swiper-wrapper .new-article .detail {
		position: absolute;
		right: 16upx;
		font-size: 26upx;
		color: #666;
	}

	.thumb {
		float: left;
		width: 280upx;
	}

	.moretext-cut {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>
